import { useState } from 'react'
import { Button, Picker, Toast } from 'antd-mobile'
interface BasicDemoProps {
    setGrade: (grade: string) => void
    setAlgorithm: (algorithm: string) => void
}
export function BasicDemo(props: BasicDemoProps) {
    // 修正为两个初始值，对应两列数据
    const [visible, setVisible] = useState(false)
    const [value, setValue] = useState<string[]>(['1', 'M']) // 一年级和乘法
    const { setGrade, setAlgorithm } = props
    const basicColumns = [
        [
            { label: '幼儿园', value: '0' },
            { label: '一年级', value: '1' },
            { label: '二年级', value: '2' },
            { label: '三年级', value: '3' },
            { label: '四年级', value: '4' },
            { label: '五年级', value: '5' },
            { label: '六年级', value: '6' },
        ],
        [
            { label: '加法', value: 'A' },
            { label: '减法', value: 'S' },
            { label: '乘法', value: 'M' },
            { label: '除法', value: 'D' },
        ]
    ]

    // 辅助函数：根据值获取对应的标签文本
    const getLabelByValue = (columnIndex: number, val: string): string => {
        const column = basicColumns[columnIndex]
        const item = column.find(item => item.value === val)
        return item ? item.label : '未选择'
    }

    // 处理确认选择
    const handleConfirm = (v: any) => {
        setValue(v as string[])
        // 显示选择的两个值
        const gradeLabel = getLabelByValue(0, v[0])//年级
        const operatorLabel = getLabelByValue(1, v[1])//运算符
        setGrade(gradeLabel)
        setAlgorithm(operatorLabel)
        Toast.show(`您选择了：${gradeLabel} - ${operatorLabel}`)
    }

    return (
        <>
            <Button 
            style={{
                '--border-radius': '0.3rem',
                '--background-color':'#3677C9',
                '--border-color':'#3677C9',
                '--text-color':'#fff',
                
            }}
                onClick={() => {
                    setVisible(true)
                }}
            >
                请选择您的年级和算法
            </Button>
            <Picker
                columns={basicColumns}
                visible={visible}
                onClose={() => {
                    setVisible(false)
                }}
                onCancel={() => {
                    Toast.show('您还未选择好哦')
                }}
                value={value}
                onConfirm={handleConfirm}
            />
        </>
    )
}

